<!--
 * @Author: 一品网络技术有限公司
 * @Date: 2022-06-22 12:07:53
 * @LastEditTime: 2024-03-28 11:29:49
 * @FilePath: \client\src\pages\welcome.vue
 * @Description:
 * 联系QQ:58055648
 * Copyright (c) 2022 by 东海县一品网络技术有限公司, All Rights Reserved.
-->
<template>
	<div class="w-full space-y-6">
		<div class="flex justify-between text-hui-200">
			<div class="w-1/5 bg-white rounded">
				<div class="flex p-3 text-sm justify-between border-b border-gray-100">
					<div class="text-sm">总营业额</div>
				</div>
				<div class="flex items-center justify-center h-[100px] text-3xl font-mono text-hong-300">
					￥{{ indexData.order_total_money }}
				</div>

			</div>
			<div class="w-1/5 bg-white rounded">
				<div class="flex p-3 text-sm justify-between border-b border-gray-100">
					<div class="text-sm">订单总量</div>
				</div>
				<div class="flex items-center justify-center h-[100px] text-3xl font-mono text-lan-300">
					{{ indexData.order_total_count }}
				</div>
			</div>
			<div class="w-1/5 bg-white rounded">
				<div class="flex p-3 text-sm justify-between border-b border-gray-100">
					<div class="text-sm">客户总量</div>
				</div>
				<div class="flex items-center justify-center h-[100px] text-3xl font-mono text-lan-300">
					{{ indexData.company_total_count }}
				</div>
			</div>
			<div class="w-1/5 bg-white rounded">
				<div class="flex p-3 text-sm justify-between border-b border-gray-100">
					<div class="text-sm">业务总量</div>
				</div>
				<div class="flex items-center justify-center h-[100px] text-3xl font-mono text-lan-300">
					{{ indexData.salesman_total_count }}
				</div>
			</div>
		</div>
		<div class="rounded bg-white p-5">
			<vue-echarts :option="indexData.chart_data" class="h-[500px]" ref="chart" />
		</div>
		<div class="bg-white rounded">
			<div class="font-bold border-b p-3 text-hui-300 text-sm">公告板</div>
			<div class="text-xs divide-y p-5">
				<div
					class="flex justify-between items-center px-2 py-3 hover:bg-gray-100 hover:text-lan-300 cursor-pointer"
					v-for="(item, index) in indexData.article_list"
					:key="item.id"
					@click="openArticleDialog(item)">
					<div>
						{{ index + 1 }}.{{ item.title }}
					</div>
					<div>{{ item.create_time }}</div>
				</div>
			</div>
		</div>
	</div>
	<ypdialog v-if="showDialog" :mask="1" title="" width="850" @close="showDialog = false">
		<div class="space-y-3">
			<div class="text-lg font-medium text-center">{{ articleData.title }}</div>
		</div>
		<div class="flex text-sm border-b border-hong-300 py-3 justify-center items-center text-hui-200">
			<div class="mr-10">发布人：{{ articleData.admin_id_name }}</div>
			<div>发布时间：{{ articleData.create_time }}</div>
		</div>
		<div class="py-3 font-thin text-lg leading-10 indent-8" v-html="articleData.content"></div>
	</ypdialog>
</template>
<script setup>
	import store from '@/store'
	import { computed, reactive, ref } from 'vue'
	import { VueEcharts } from 'vue3-echarts'
	const indexData = computed(() => store.state.indexData)
	const showDialog = ref(false)
	const articleData = reactive({
		title: '',
		admin_id_name: '',
		content: '',
		create_time: ''
	})
	const openArticleDialog = (item) => {
		for (let key in articleData) {
			articleData[key] = item[key]
		}
		showDialog.value = true
	}



</script>
